<script setup>
import { message } from 'ant-design-vue'
import { reactive } from 'vue'
import useToken from '@/stores/token.js'
import { login } from '@/api/user'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const formData = reactive({
  username: 'demo',
  password: 'zh@hm#23',
  isAgree: true
})

//submit提交事件
const onFinish = async (values) => {
  // 调用状态管理器中的useToken函数，并结构出setToken
  const { setToken } = useToken()
  // console.log('Success:', values);
  const { data } = await login(values)
  setToken(data.token)
  message.success('登录成功')
  router.push('/')
  console.log(data.token)
}
</script>
<template>
  <div class="login">
    <div class="left">
      <img src="@/assets/login-bg-e4ea539c.svg" alt="黑马智数" />
    </div>
    <div class="right">
      <div class="right_login">
          <h3 style="font-size: 30px; margin-bottom: 35px">智慧园区-登录</h3>
        <a-form
          :model="formData"
          @finish="onFinish"
          :labelCol="{ span: 3, offset: 120 }"
          :wrapperCol="{ span: 20 }"
          autocomplete="off"
          layout="vertical"
        >
          <a-form-item
            name="username"
            label="账号"
            :rules="[{ required: true, message: '账号不能为空' }]"
          >
            <a-input v-model:value="formData.username" type="text"></a-input>
          </a-form-item>
          <a-form-item
            name="password"
            label="密码"
            :rules="[{ required: true, message: '密码不能为空' }]"
          >
            <a-input-password v-model:value="formData.password" type="password"></a-input-password>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model:checked="formData.isAgree"></a-checkbox>
            记住我
          </a-form-item>
          <a-form-item>
              <a-button type="primary" html-type="submit" block style="height: 40px;">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.login {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .left {
    flex: 6;
    img {
      width: 100%;
    }
  }
  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 4;
    min-width: 300px;
    // background-color: green;
    .right_login {
      width: 400px;
    //   background-color: skyblue;
    }
  }
}
</style>
